<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0  minimum-scale=1.0, maximum-scale=2.0" />
<meta name="MobileOptimized" content="240" />
<link rel="stylesheet" type="text/css" href="/mobile/css/base.css"/>
<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/mobile/scripts/context.js" ></script>
<script type="text/javascript" src="/app/scripts/common_lib.js" ></script>
<title>品质从此无忧-麦丰网</title>
<style type="text/css">

body {
	margin: 0px;
	background:#f1f1f1;
	font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
	text-align: center;
	width:100%;
}

.div-header {
	width: 100%;
	height: 45px;
	color: #FFF;
	margin: 0 auto;
	line-height: 45px;
	text-align: left;
	background: url(images/red_bg.jpg) repeat;
}

#name{ 
	font-size:18px; 
	line-height:45px; 
	padding-left:0px; 
	margin-left:0px;
	width:200px; 
	height:45px; 
	float:left;
	padding-left: 10px;
}

#user{
	background:url(images/user_white.png) no-repeat center;
	width:32px; 
	height:45px; 
	float:right;
	
}

ul,li{list-style:none; padding: 0;margin: 0;}

.div-leader {
	width: 100%;
	max-width:320px;
	height: 25px;
	background-color: transparent;
	margin: 0 auto;
	/*
	left:50%;
	margin-left:-160px;
	position:fixed; 
	*/
}
.table-leader {
	width: 100%;
	text-align: center;
}

table td {
	text-align: center;
}

.menu1{color:#777;line-height:23px; width:12%;  padding:0px 2px; border-bottom:1px solid #CCC;  font-size:14px; }
.menu2{color:#ff3f40;line-height:23px;  width:12%; padding:0px 2px; border-bottom:1px solid #ff3f40; font-weight:bold; font-size:14px;}

.i_box a {
	padding: 2px 5px;
	background-color: #e9e9e9;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #585858;
	line-height: 20px;
}
.i_box * {
	vertical-align: middle;
}
.i_box input {
	width: 30px;
	height: 18px;
	margin: 0 8px;
	padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 16px;
}

.div-banner {
	width:320px;
	height: 195px;
	background-color: white;
	margin: 0 auto;
	margin-top: 5px;
	/*
	left:50%;
	margin-top: 30px;
	margin-left: -160px;
	position: fixed;
	*/
}

.div-content {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
	margin-top: 8px;
}
.div-product {
	width: 100%;
	max-width: 330px;
	height: 150px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 40%;
	float: right;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.div-footer {
	width: 100%;
	max-width: 330px;
	height:100px;
	background-color: #CCC;
	top: 100%;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 50px;
}

.div-bottom {
	width: 100%;
	height: 50px;
	top: 100%;
	left:-50%;
	margin-left:50%;
	margin-top: -50px;
	position: fixed;
}

.div-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	display: none;
}

.img-loading {
	width: 100%;
	height: 100%;
}

#table-bottom { 
	width:100%; 
	height:35px;	
	line-height:35px; 
	background:#333;
	color: #CCC;
	bottom: 0px;
	position: fixed;
}

.td-product-name {
 	background:#b6a98f; 
 	color:#FFFFFF; 
 	font-weight:bold;
 	line-height:25px;
 	text-align: left;
}
 
 .td-spec {
 	text-align: left;
 }

.menu-down{float:left; border:1px solid #ff3e3f; background:url(images/select_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#000000; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}
.menu-up{float:left;border:1px solid #CCCCCC; font-size:14px; padding:0px 5px;height:22px; color:#000000; line-height:25px; margin-right:5px;margin-bottom:5px; text-align:center; background:#FFFFFF}
.menu-note{float:left; border:1px solid #666666; background:url(images/note_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#666666; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}


.bitButton{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}
.bitButton1{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg3.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}

.smallButton{ margin-top:10px;border:0;height:30px; background:url(images/button_bg.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}
.smallButton1{border:0;height:22px; background:url(images/button_back.jpg) repeat; color:#FFFFFF; text-align:center;}


.spec-image {
	border:1px solid #CCC;
	width: 80px; 
	height: 80px;
}

</style>
</head>
<body>
	<div class="div-header">
		<ul>
			<li id="name">订单修改</li>
			<li id="user" onclick="location.href='/'"></li>
		</ul>
	</div>
	
	<div class = "div-content">
		<input type="hidden" id = "order_id" name="order_id" value = "0"/>
		<form style="background:#FFFFFF; padding:5px;">
			<table width="100%" border="0" cellspacing="0" cellpadding="5" class="d_cardlist">
				<tbody>
				<tr>
				  <td width="80%" valign="middle" class="td-product-name" id="product-name"></td>
				  <td width="20%" align="right" valign="middle" style="background:#b6a98f; color:#FFFFFF; font-weight:bold; line-height:25px;text-align: right;">
				            <input onclick="deleteOrder()" name="button"  type="button" class="smallButton" id="button" style="width:40px; height:22px; margin:0px; padding:0px; line-height:22px;" value="删除" />
				  </td>
				</tr>
							
				<tr>
				  <td colspan="2" valign="middle">
				  	<table width="100%" border="0" cellspacing="0" cellpadding="0">
					    <tr>
					    	<td width="90" rowspan="2" style="text-align: left;"><img class="spec-image" id="spec-image"/></td>
					    	<td height="50" align="left" valign="top" style="text-align: left; line-height: 20px;">
								<span id = "spec-name"></span><br />
								￥<span id="spec-price"></span><br />
					    	</td>
					    </tr>
					    <tr>
					      <td align="left" valign="middle" style="text-align: left;">
								<div class="i_box">
						            <a href="javascript:;" class="J_minus">-</a>
						            <input type="text" id = "quantity" name="quantity" size="2" class="J_input"  value="" />
						            <a href="javascript:;" class="J_add">+</a>
					        	</div>      
					      </td>
					    </tr>
				    </table>
				    </td>
				</tr>
				</tbody>
			</table>

		    <input type="button" value="保存修改" class="bitButton" onclick="updateOrder()"/>
		
		</form>
	</div>
	<div class = "div-footer">
		<iframe class = "iframe-view" src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-bottom">
		<iframe class = "iframe-view" src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		cjl.getTitle();
		var order_id = cjl.requestData("id");
		$("#order_id").val(order_id);
		getOrder(order_id);
	});
	
	function getOrder(id) {
		var url = "/order/detail";
		cjl.get(url,{id : id},function(body) {
			var order = body;
			$("#product-name").text(order.product_name);
			$("#spec-image").attr("src",order.image);
			$("#spec-name").text(order.catalog_name+" ("+order.specification_name+")");
			$("#spec-price").text(order.price.toFixed(2));
			$("#quantity").val(order.quantity);
		});
	}
	
	function updateOrder() {
		var url = "/order/update";
		var id = $("#order_id").val();
		var quantity = $("#quantity").val();
		cjl.post(url, {id:id, quantity:quantity}, function(body) {
			window.location="orderConfirm.html";
		});
	}
	
	function deleteOrder() {
		var url = "/order/cancel";
		var id = $("#order_id").val();
		cjl.post(url, {id:id}, function(body) {
			window.location="orderConfirm.html";
		});
	}
</script>

<script type="text/javascript">
	$.fn.iVaryVal=function(iSet,CallBack){
		/*
		 * Minus:点击元素--减小
		 * Add:点击元素--增加
		 * Input:表单元素
		 * Min:表单的最小值，非负整数
		 * Max:表单的最大值，正整数
		 */
		iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:1,Max:1000},iSet);
		var C=null,O=null;
		//插件返回值
		var $CB={};
		//增加
		iSet.Add.each(function(i){
			$(this).click(function(){
				O=parseInt(iSet.Input.eq(i).val());
				(O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
				//输出当前改变后的值
				$CB.val=iSet.Input.eq(i).val();
				$CB.index=i;
				//回调函数
				if (typeof CallBack == 'function') {
	                CallBack($CB.val,$CB.index);
	            }
			});
		});
		//减少
		iSet.Minus.each(function(i){
			$(this).click(function(){
				O=parseInt(iSet.Input.eq(i).val());
				O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
				$CB.val=iSet.Input.eq(i).val();
				$CB.index=i;
				//回调函数
				if (typeof CallBack == 'function') {
					CallBack($CB.val,$CB.index);
			  	}
			});
		});
		//手动
		iSet.Input.bind({
			'click':function(){
				O=parseInt($(this).val());
				$(this).select();
			},
			'keyup':function(e){
				if($(this).val()!=''){
					C=parseInt($(this).val());
					//非负整数判断
					if(/^[1-9]\d*|0$/.test(C)){
						$(this).val(C);
						O=C;
					}else{
						$(this).val(O);
					}
				}
				//键盘控制：上右--加，下左--减
				if(e.keyCode==38 || e.keyCode==39){
					iSet.Add.eq(iSet.Input.index(this)).click();
				}
				if(e.keyCode==37 || e.keyCode==40){
					iSet.Minus.eq(iSet.Input.index(this)).click();
				}
				//输出当前改变后的值
				$CB.val=$(this).val();
				$CB.index=iSet.Input.index(this);
				//回调函数
				if (typeof CallBack == 'function') {
	                CallBack($CB.val,$CB.index);
	            }
			},
			'blur':function(){
				$(this).trigger('keyup');
				if($(this).val()==''){
					$(this).val(O);
				}
				//判断输入值是否超出最大最小值
				if(iSet.Max){
					if(O>iSet.Max){
						$(this).val(iSet.Max);
					}
				}
				if(O<iSet.Min){
					$(this).val(iSet.Min);
				}
				//输出当前改变后的值
				$CB.val=$(this).val();
				$CB.index=iSet.Input.index(this);
				//回调函数
				if (typeof CallBack == 'function') {
	                CallBack($CB.val,$CB.index);
	            }
			}
		});
	}
	//调用
	$( function() {
		
		$('.i_box').iVaryVal({},function(value,index){
			$('.i_tips').html('你点击的表单索引是：'+index+'；改变后的表单值是：'+value);
		});
		
	});
</script>
</html>